﻿@page "/icon"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Icon
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>Icon</strong> component.
</RadzenText>

<RadzenText Anchor="icon#material-icons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Material Icons
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    By default, the <code>RadzenIcon</code> component uses the embedded in Radzen Blazor Components <code>MaterialIcons-Regular.woff</code> font.
</RadzenText>
<RadzenExample ComponentName="Icon" Example="IconMaterial">
    <IconMaterial />
</RadzenExample>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mt-8">
    <RadzenLink Path="https://material.io/tools/icons/" Text="See all Material icons" target="_blank"/>
</RadzenText>

<RadzenText Anchor="icon#icon-color" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Icon color
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>IconColor</code> property to set custom icon foreground color.
</RadzenText>
<RadzenExample ComponentName="Icon" Example="IconColor">
    <IconColor />
</RadzenExample>

<RadzenText Anchor="icon#styled-icons" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Syled icons
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1"class="rz-mb-8">
    Use <code>IconStyle</code> property to modify the icons foreground color. It offers the standard styles defined by the theme.
</RadzenText>
<RadzenExample ComponentName="Icon" Example="IconStyles">
    <IconStyles />
</RadzenExample>

<RadzenText Anchor="icon#icons-width-other-fonts" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Using RadzenIcon with other icon fonts
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1">
    You can use any icon font supporting ligatures with the <code>RadzenIcon</code> component. To do so, you need to load the font file using the CSS <code>@@font-face</code> at-rule and set the corresponding font-family name to the <code>--rz-icon-font-family</code> CSS variable. The example below uses Material Symbols font.
</RadzenText>
<RadzenText TextStyle="TextStyle.H6" TagName="TagName.H3" class="rz-pt-8">
    RadzenIcon with Material Symbols font
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Material Symbols is a variable font containing multiple stylistic variations e.g. you can control the boldness of the icon using the <code>font-weight:</code> CSS property. 
</RadzenText>
<RadzenExample ComponentName="Icon" Example="IconFonts">
    <IconFonts />
</RadzenExample>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mt-8">
    Read more about <RadzenLink Path="https://fonts.google.com/knowledge/glossary/variable_fonts" Text="variable fonts" target="_blank" />.
</RadzenText>
